<template>
<Row :gutter="20">
    <div style="padding-bottom:20px">
        <Card>
            <p slot="title">
                <Icon type="person"></Icon>
                个人信息
            </p>
            <Form  :model="userForm" label-position="right" :label-width="100">
                <FormItem  label="用户姓名：" prop="name">
                    <div style="display:inline-block;width:300px;">
                        <Input v-model="userForm.name" ></Input>
                    </div>
                </FormItem>
                <FormItem  label="  性別："prop="sex">
                    <div style="display:inline-block;width:300px;">
                        <i-select v-model="userForm.sex" style="width:200px">
                            <i-option v-for="item in sexList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </div>
                </FormItem>
                <FormItem  label="民族："prop="sex">
                    <div style="display:inline-block;width:300px;">
                        <i-select v-model="userForm.model1" style="width:200px">
                            <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </div>
                </FormItem>
                <FormItem  label="手机号："prop="sex">
                    <div style="display:inline-block;width:300px;">
                        <Input v-model="userForm.phone" :maxlength="11"></Input>
                    </div>
                </FormItem>
            </Form>
            <div >
                <Button type="primary" :loading="savePassLoading" @click="saveEditPass">保存</Button>
            </div>
        </Card>
    </div>
</Row>
</template>
<script>
    export default {
        name: "information",
        data(){
            return {
                savePassLoading:false,
                userForm: {
                    name: '',
                    sex:'',
                    phone:'',
                    model1:'',
                    phone:'',
                },
                cityList:[
                    {
                        value:'1',
                        label:"汉族",
                    },
                    {
                        value:'2',
                        label:"回族",
                    },
                ],
                sexList:[
                    {
                        value:'1',
                        label:"男 ",
                    },
                    {
                        value:'2',
                        label:"女",
                    },
                ]
            }
            },
        methods:{
            saveEditPass(){
                console.log(this.userForm);
            }
        }
    }
</script>
<style scoped>

</style>